<template>
  <view class="feedback-detail-container">
    <view v-if="feedbackDetail" class="detail-content">
      <!-- 反馈信息 -->
      <view class="feedback-section">
        <view class="section-header">
          <text class="section-title">反馈信息</text>
        </view>
        
        <view class="feedback-info">
          <view class="info-row">
            <text class="info-label">反馈类型</text>
            <text class="info-value">{{ getTypeLabel(feedbackDetail.feedbackType) }}</text>
          </view>
          
          <view class="info-row">
            <text class="info-label">处理状态</text>
            <view class="info-value">
              <text class="status-tag" :class="getStatusClass(feedbackDetail.status)">
                {{ getStatusLabel(feedbackDetail.status) }}
              </text>
            </view>
          </view>
          
          <view class="info-row">
            <text class="info-label">提交时间</text>
            <text class="info-value">{{ formatDateTime(feedbackDetail.createTime) }}</text>
          </view>
          
          <view v-if="feedbackDetail.contact" class="info-row">
            <text class="info-label">联系方式</text>
            <text class="info-value">{{ feedbackDetail.contact }}</text>
          </view>
        </view>
        
        <view class="feedback-content">
          <text class="content-label">反馈内容</text>
          <text class="content-text">{{ feedbackDetail.content }}</text>
        </view>
        
        <view v-if="feedbackDetail.image" class="feedback-images">
          <text class="images-label">相关图片</text>
          <view class="image-list">
            <image 
              v-for="(imageUrl, index) in imageList" 
              :key="index"
              :src="imageUrl"
              mode="aspectFill"
              class="feedback-image"
              @click="previewImage(index)"
            />
          </view>
        </view>
      </view>

      <!-- 官方回复 -->
      <view v-if="feedbackDetail.reply" class="reply-section">
        <view class="section-header">
          <text class="section-title">官方回复</text>
          <text class="reply-time">{{ formatDateTime(feedbackDetail.updateTime) }}</text>
        </view>
        
        <view class="reply-content">
          <text class="reply-text">{{ feedbackDetail.reply }}</text>
        </view>
      </view>

      <!-- 暂无回复 -->
      <view v-else class="no-reply-section">
        <view class="section-header">
          <text class="section-title">官方回复</text>
        </view>
        
        <view class="no-reply-content">
          <text class="no-reply-text">暂无回复，请耐心等待</text>
          <text class="no-reply-subtext">我们会尽快处理您的反馈</text>
        </view>
      </view>
    </view>

    <Loading :show="isLoading" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { getFeedbackDetail } from '@/api/user';
import { formatDateTime } from '@/utils/format';
import Loading from '@/components/Loading.vue';

const feedbackDetail = ref<any>(null);
const isLoading = ref(false);

// 计算图片列表
const imageList = computed(() => {
  if (!feedbackDetail.value?.image) return [];
  return feedbackDetail.value.image.split(',').filter((url: string) => url.trim());
});

// 获取反馈类型标签
const getTypeLabel = (type: number) => {
  const typeMap: { [key: number]: string } = {
    1: '功能建议',
    2: '问题投诉',
    3: '其他'
  };
  return typeMap[type] || '其他';
};

// 获取状态标签
const getStatusLabel = (status: number) => {
  const statusMap: { [key: number]: string } = {
    0: '待处理',
    1: '处理中',
    2: '已处理'
  };
  return statusMap[status] || '待处理';
};

// 获取状态样式类
const getStatusClass = (status: number) => {
  const classMap: { [key: number]: string } = {
    0: 'status-pending',
    1: 'status-processing',
    2: 'status-completed'
  };
  return classMap[status] || 'status-pending';
};

// 预览图片
const previewImage = (index: number) => {
  uni.previewImage({
    current: index,
    urls: imageList.value
  });
};

// 获取反馈详情
const loadFeedbackDetail = async () => {
  try {
    isLoading.value = true;
    
    // 获取页面参数
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const feedbackId = currentPage.options?.id;
    
    if (!feedbackId) {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      });
      return;
    }

    const response = await getFeedbackDetail(parseInt(feedbackId));

    if (response.code === 200) {
      feedbackDetail.value = response.data;
    } else {
      uni.showToast({
        title: response.msg || '获取反馈详情失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取反馈详情失败:', error);
    uni.showToast({
      title: '获取反馈详情失败',
      icon: 'none'
    });
  } finally {
    isLoading.value = false;
  }
};

onMounted(() => {
  loadFeedbackDetail();
});
</script>

<style>
.feedback-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.feedback-section,
.reply-section,
.no-reply-section {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.reply-time {
  font-size: 24rpx;
  color: #999;
}

.feedback-info {
  margin-bottom: 30rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.info-value {
  font-size: 28rpx;
  color: #333;
}

.status-tag {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #ffffff;
}

.status-pending {
  background-color: #faad14;
}

.status-processing {
  background-color: #1890ff;
}

.status-completed {
  background-color: #52c41a;
}

.feedback-content {
  margin-bottom: 30rpx;
}

.content-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}

.content-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  background-color: #f8f9fa;
  padding: 20rpx;
  border-radius: 8rpx;
}

.feedback-images {
  margin-bottom: 20rpx;
}

.images-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.feedback-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
}

.reply-content {
  background-color: #f8f9fa;
  border-radius: 8rpx;
  padding: 20rpx;
  border-left: 4rpx solid #1890ff;
}

.reply-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.no-reply-content {
  text-align: center;
  padding: 60rpx 0;
}

.no-reply-text {
  font-size: 28rpx;
  color: #999;
  display: block;
  margin-bottom: 10rpx;
}

.no-reply-subtext {
  font-size: 24rpx;
  color: #ccc;
}
</style> 